<template>
	<navigatorComp title="修行详情" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="content">
		<view class="pracitce_userInfo">
			<image :src="detail.headUrl || 'http://112.124.50.179:8888/imgs/default_avater.png'" mode=""></image>
			<view class="userInfo_name">{{detail.nickname}}</view>
			<view class="display_flex">
				<view class="userInfo_item">
					<view class="title">
						目前已
						<text style="color: #fff">连续</text>
						修行
					</view>
					<view class="time">
						{{detail.continuityDays}}
						<text>天</text>
					</view>
				</view>
				<view class="userInfo_item">
					<view class="title">
						目前已
						<text style="color: #fff">累计</text>
						修行
					</view>
					<view class="time">
						{{detail.cumulativeDays}}
						<text>天</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pracitce_cardList">
			<view class="pracitce_card" @click="goUrl('/subPages/worship/history')">
				<image class="bottomImg" src="http://112.124.50.179:8888/imgs/worship/worship_card1.png" mode=""></image>
				<view class="title">
					祭拜历史
					<up-icon name="arrow-right" size="18" color="#fff"></up-icon>
				</view>
				<view class="num">
					{{detail.worshipFrequency}}
					<text>次</text>
				</view>
			</view>
			<view class="pracitce_card" @click="goUrl('/subPages/worship/huanyuan_records')">
				<image class="bottomImg" src="http://112.124.50.179:8888/imgs/worship/worship_card2.png" mode=""></image>
				<view class="title">
					还愿记录
					<up-icon name="arrow-right" size="18" color="#fff"></up-icon>
				</view>
				<view class="num">
					{{detail.auspiciousnessFrequency}}
					<text>次</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import WorshipApi from '@/API/worship';
	const worshipApi = new WorshipApi();

	const detail = ref({});

	onLoad(() => {
		getDetail();
	});

	const getDetail = () => {
		worshipApi.getPracticeDetails().then((res) => {
			if (res.code === 0) {
				detail.value = res.data;
			}
		});
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.pracitce_userInfo {
		margin-top: 56rpx;
		background: #292b2a;
		border-radius: 40rpx;
		padding: 16rpx 40rpx 40rpx;
		position: relative;

		image {
			position: absolute;
			top: -32rpx;
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.userInfo_name {
			margin-left: 128rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 42rpx;
			height: 42rpx;
		}

		.userInfo_item {
			flex: 1;
			border-right: 2rpx solid #333333;
			margin-top: 54rpx;
			margin-right: 44rpx;

			&:last-child {
				border-right: 0;
				margin-right: 0;
			}

			.title {
				font-weight: 400;
				font-size: 28rpx;
				color: #c5c5c5;
				line-height: 40rpx;
			}

			.time {
				margin-top: 12rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 50rpx;
				display: flex;
				align-items: center;

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 50rpx;
					margin-left: 8rpx;
				}
			}
		}
	}

	.pracitce_cardList {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 26rpx;
		margin-top: 32rpx;

		.pracitce_card {
			padding: 32rpx 24rpx 32rpx 32rpx;
			background: #292b2a;
			border-radius: 40rpx;
			position: relative;

			.bottomImg {
				width: 90rpx;
				height: 124rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 40rpx;
			}

			.num {
				margin-top: 48rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 50rpx;
				display: flex;
				align-items: center;

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 50rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
</style>